<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{message}}
  </div>

  <script src="../js/vue.js"></script>
  <!-- vue是一个渐进式的框架，可以作为应用的一部分嵌入其中，带来丰富的交互体验
  特点：.解耦视图和数据
  .可复用的组件
前端路由技术
状态管理
虚拟dom -->
  <script>
    //let(变量)//const(常量)
    //编程范式:声明式编程
    const app = new Vue({
      el: '#app',//用于挂载要管理的元素
      data: {//定义数据 也可能来自网络，也可能来自服务器
        message: '你好啊'
      }
    })
      //元素js的做法(编程范式:命令的范式)
      //1.创建div元素,设置id属性
      //2.定义一个变量叫message
      //3.将message变量放在前面的div元素中显示
      //4.修改message的数据:今天天气不错
      //5.将修改后的数据再次替换到div元素
  </script>
</body>

</html>